<script setup lang="ts">
import dayjs from 'dayjs'
import { ActivityFormField, ActivityFormRules } from '@/common/form-config/index'
import hopeForms from '@/common/components/hope-forms.vue'
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { createActivityService } from '@/common/service/activity'
import { useUserStore } from '@/common/store'
import type { ActivityDetail } from '@/common/types/activity'
import type { FormOnSubmit } from '@/common/types/form'
import { PagePath, PageTitle } from '@/common/constants'

const { contentAreaHeight, safeBottom } = useLayoutInfo()
// TODO: 地址字段 实现地图选点功能 后续再实现
const chooseLocation = requirePlugin('chooseLocation')

const { hope_user_info } = useUserStore()

const hopeFormRef = ref<InstanceType<typeof hopeForms>>()

/**
 * 表单提交事件 这里自定义提交处理方法
 * @param isVerify 是否通过校验
 * @param value
 */
const onSubmit: FormOnSubmit = async ({ isVerify, value }) => {
  if (!value)
    return

  // 验证成功则创建活动
  if (isVerify) {
    const formData = value as Omit<ActivityDetail, 'id' | 'registeredVolunteers'>

    const data = {
      ...formData,
      startTime: dayjs(value.startTimeAndEndTime[0]).format('YYYY-MM-DDTHH:mm:ss'),
      endTime: dayjs(value.startTimeAndEndTime[1]).format('YYYY-MM-DDTHH:mm:ss'),
      contactPhone: hope_user_info?.phoneNumber ? hope_user_info.phoneNumber : '',
      contactAvatarUrl: hope_user_info?.avatarUrl ? hope_user_info.avatarUrl : '',
      contactNickname: hope_user_info?.nickname ? hope_user_info.nickname : '',
    }

    // 创建志愿者活动服务
    createActivityService(data).then(() => {
      uni.showToast({
        title: '创建活动成功',
        icon: 'none',
      })

      goToPage(PagePath.ACTIVITY)
    }).catch(() => {
      uni.showToast({
        title: '创建活动失败',
        icon: 'none',
      })
    })
  }
}

/** 创建活动事件 */
const createActivity = () => {
  hopeFormRef.value?.onSubmit()
}
</script>

<template>
  <view class="activity-create-container">
    <hope-nav-bar :title="PageTitle.ACTIVITY" is-back-icon />
    <view class="activity-create-scroll-container">
      <scroll-view
        scroll-y class="activity-create-scroll-content" :style="{
          height: `${contentAreaHeight - safeBottom!}px`,
          paddingBottom: `${safeBottom}px`,
        }"
      >
        <view class="activity-create-form">
          <hope-forms
            ref="hopeFormRef" label-position="top" label-width="100%" :fields="ActivityFormField" :rules="ActivityFormRules"
            @on-submit="onSubmit"
          />
        </view>
      </scroll-view>
    </view>

    <view class="activity-create-bottom" @click="createActivity">
      <hope-button title="创建活动" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.activity-create {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;

  }

  &-scroll {
    &-container {
      flex: 1;
      overflow: scroll;
    }

    &-content {
      height: 100%;
      background-color: $color-white;
    }
  }

  &-form {
    padding-top: $padding-base;
    padding-inline: $padding-base;

  }

  &-bottom {
    background-color: $color-white;
    padding-inline: $padding-base;
    padding-top: 16rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  }

}

.form {
  &-container {
    display: flex;
    flex-direction: column;
    gap: $padding-base;

  }
}
</style>
